<template>
    <div class="account-form-dialog">
        <el-dialog v-model="dialogFormVisible"
                   :title="opt === 'EDIT' ? '修改' : '添加'"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   @close="$emit('update:show', false)"
                   destroy-on-close
                   width="40%"
                   top="8vh">
            <el-form :model="accountForm" :rules="accountFormRules" ref="accountForm" label-position="right"
                     label-width="100px">
                <el-form-item v-if="opt === 'ADD'" label="用户名" prop="username">
                    <el-input v-model="accountForm.username" placeholder="请输入登录用户名"/>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-model="accountForm.nickName" placeholder="请输入昵称"/>
                </el-form-item>
                <el-form-item label="用户性别">
                    <el-radio-group v-model="accountForm.gender">
                        <el-radio :label="1">女</el-radio>
                        <el-radio :label="2">男</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户年龄">
                    <el-input-number v-model="accountForm.age" size="small" :min="1" :max="200"/>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="accountForm.mobile" placeholder="请输入手机号"/>
                </el-form-item>
                <el-form-item label="邮箱号">
                    <el-input v-model="accountForm.email" placeholder="请输入邮箱号"/>
                </el-form-item>

                <!--                <el-form-item label="头像">
                                    <el-upload v-loading="uploadLoading"
                                               class="logo-uploader"
                                               action="/accountite-api/image/upload"
                                               :show-file-list="false"
                                               :on-success="handleLogoSuccess"
                                               :on-error="handleLogoFail"
                                               :before-upload="beforeLogoUpload">
                                        <template #slot>
                                            <div class="el-upload__tip"
                                                 style="display: inline; padding-left: 15px">只能上传jpg/png文件，且不超过1MB
                                            </div>
                                        </template>
                                        <img v-if="avatarUrl" :src="avatarUrl" class="account-logo"/>
                                        <i v-else class="el-icon-plus logo-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>-->
            </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" plain @click="submitFavorForm('accountForm')">提 交</el-button>
                <el-button type="info" plain @click="dialogFormVisible = false">关 闭</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import accountReq from "@/services/account/request"

export default {
    name: "AccountForm",
    props: {
        show: {type: Boolean, default: false},
        opt: {type: String},
        datas: {type: Object,},
    },
    watch: {
        show() {
            if (this.show) {
                // this.getAllCatalog()
                this.accountForm = this.datas
                this.dialogFormVisible = this.show
                /*if (this.opt === "EDIT") {
                    this.avatarUrl = "/account-api" + this.datas.logo
                } else {
                    this.avatarUrl = null
                }*/
            }
        },
    },
    data() {
        const validateUname = async (rule, value, callback) => {
            if (!value || (value = value.trim()) === '') {
                callback(new Error('请输入用户名'))
            } else {
                if (/[\u4E00-\u9FA5\uFE30-\uFFA0]/.test(value)) {
                    callback(new Error('不能包含中文符号或中文'))
                } else {
                    // 验证用户名是否存在
                    let r = await accountReq.usernameIsExist({username: value})
                    if (r.code === 0) {
                        callback(new Error('该用户名已存在'))
                    } else {
                        callback()
                    }
                }
            }
        }
        return {
            dialogFormVisible: false,

            accountForm: {},
            accountFormRules: {
                username: [{required: true, validator: validateUname, trigger: "blur"}],
                nickName: [{required: true, message: "请输入用户昵称", trigger: "blur"}],
            },

            avatarUrl: "",
            uploadLoading: false,
        };
    },
    methods: {
        submitFavorForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 提交后台
                    let r = await accountReq.save(this.accountForm)
                    if (r.code === 0) {
                        this.$message.success("操作成功")
                        this.dialogFormVisible = false
                        // 让父组件刷新列表
                        this.$emit("finishMethod")
                    } else {
                        this.$message.error(r.msg)
                    }
                } else {
                    return false;
                }
            });
        },
        /*handleLogoSuccess(res, file) {
            this.uploadLoading = false;
            if (res.code === 0) {
                this.$message.success("上传成功！");
                this.accountForm.logo = res.data;
                this.avatarUrl = URL.createObjectURL(file.raw);
            } else {
                this.$message.error("上传失败：" + res.msg);
            }
        },
        handleLogoFail() {
            this.uploadLoading = false;
        },
        beforeLogoUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isPNG = file.type === "image/png";
            const isLt1M = file.size / 1024 / 1024 < 1;
            if (!isJPG && !isPNG) {
                this.$message.error("图片只能是【JPG、PNG】格式!");
                return false;
            }
            if (!isLt1M) {
                this.$message.error("图片大小不能超过 1MB!");
                return false;
            }
            this.uploadLoading = true;
            return true;
        },*/
    },
}
</script>

<style lang="scss">
.account-form-dialog .el-dialog__body {
    padding: 10px 20px 0;
}

</style>